<template>
	<view>
		<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
			<cover-image src="../../static/logo.png" class="logo"></cover-image>
		</view>
		<view class="login-input">
			<view>
				<input class="uni-input" v-model="phone" maxlength="11" focus placeholder="手机号" />
			</view>
			<view class="uni-flex uni-row">
				<input class="uni-input" v-model="smsCode" focus placeholder="验证码" />
				<button class="butt" type="primary" :disabled="getState" plain="true"
					@click="getCode">{{getText}}</button>
			</view>
		</view>
		<view class="">
			<button class="butt1" type="primary" @click="getIndex">登录</button>
		</view>
	</view>
</template>

<script>
	
	import { baseDefaultUrl } from '../../config/config';
	
	export default {
		data() {
			return {
				phone: '15668329698',
				getState: false,
				getText: '获取验证码',
				smsCode:''
			}
		},
		methods: {
			getCode() {
				if (!/^1[3456789]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
				} else {
					this.getState = true
					var time = 10
					var timer = setInterval(() => {
						if (time > 0) {
							this.getText = time + 's后重新获取'
							time -= 1
						} else {
							clearInterval(timer)
							this.getState = false
							this.getText = '获取验证码'
						}
					}, 1000)
					uni.request({
						url: baseDefaultUrl + "/inter/user/smsSend",
						method: 'GET',
						data: {
							"phoneNUmber": this.phone
						},
						success: (res) => {
							if (res.data.code != 0) {
								
							} else {
								alert(res.data.message)
							}
						}
					})
				}
			},
			getIndex() {
				uni.request({
					url: baseDefaultUrl + "/inter/user/login",
					method:'POST',
					header:{
						'Authorization':"token"
					},
					data:{
						username:this.phone,
						password:this.smsCode
					},
					success: (res) => {
						if(res.data.code != 0){
							uni.setStorage({
								key: 'token',
								data: res.data.data.token
							});
							uni.setStorage({
								key: 'phone',
								data: this.phone
								
							});
							uni.switchTab({
								url: '/pages/index/index'
							})
						}else{
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					}
				})
				
				
			}
		}
	}
</script>

<style>
	.logo {
		margin: 200rpx 0 250rpx 0;
		width: 200rpx;
	}

	.text {
		font-size: 40rpx;
		font-weight: bolder;
	}

	.login-input {
		width: 70%;
		margin: 10rpx auto;
	}

	.uni-input {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		margin-bottom: 30rpx;
	}

	.butt {
		margin: 5rpx 0;
		height: 70rpx;
		line-height: 65rpx;
		font-size: 35rpx;
	}

	.butt1 {
		width: 40%;
		margin: 50rpx auto 0 auto;
	}
</style>